<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div id="box" hello="world">我是一个div标签</div>

    <script>
        /* 
        操作元素属性

        1.attr()
          => 可以进行设置和获取元素的属性
          => 注意：一般用于操作元素的自定义属性
          => 获取：
            -> 元素.attr(你要获取的属性名)
            -> 返回值：该属性名对应的属性值
          => 设置：
            -> 语法：元素.attr(属性名,属性值)
        
        2.removeAttr()
          => 对元素的属性进行删除操作
          => 语法：元素集合.removeAttr(你要删除的属性)
        */

        // // 1-1. attr()获取
        // console.log($('div').attr('hello'))
        // console.log($('div').attr('id'))

        // // 1-2. attr()设置
        // $('div').attr('a','100')
        // $('div').attr('id','container')

        // // 1-3. removeAttr()删除
        // $('div').removeAttr('hello')
        // $('div').removeAttr('id')


        /* 
        1.prop()
          + 注意：
            => 当 prop 设置元素的原生属性，会直接响应在元素标签身上
            => 当 prop 设置元素自定义属性，不会直接响应在元素标签身上，会相应在元素对象身上
          + 注意：prop 方法不会获取元素标签身上的自定义属性，只能获取到 prop 方法自己设置的自定义属性
          + prop ()设置
            => 语法：元素集合.prop(属性名,属性值)
          + prop()获取
            => 语法：元素集合.prop(你要获取的属性名)
            => 返回值：该属性对应的值

        2.removeProp()
          + 用来删除元素属性的方法
          +注意：
            => 不能删除原生属性
            => 只能删除由 prop 方法设置的自定义属性
          +语法：元素集合.removeProp(你要删除的属性名)
        */

        // // 1-1. prop()设置
        // $('div').prop('id','container')
        $('div').prop('a',100)
        console.log($('div'))

        // // 1-2. prop()获取
        // console.log($('div').prop('id'))
        // console.log($('div').prop('hello'))  //只能拿 prop 自己设置的自定义属性
        // console.log($('div').prop('a'))

        // 1-3. removeProp()
        $('div').removeProp('id')
        $('div').removeProp('a')
    </script>
</body>
</html>